<template>
  <div class="statistics-box">
    <div class="teacher-data-box" id="teacherData"></div>
    <div class="costRank-box" id="costRankData"></div>
    <div class="project-box">
        <el-table
            :data="projectListWithState"
            style="width: 90%;left: 5%;">
            <el-table-column type="expand">
            <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="项目编号">
                    <span>{{ props.row.id }}</span>
                </el-form-item>
                <el-form-item label="项目名称">
                    <span>{{ props.row.projectname }}</span>
                </el-form-item>
                <el-form-item label="申请人姓名">
                    <span>{{ props.row.name }}</span>
                </el-form-item>
                <el-form-item label="联系方式(QQ)">
                    <span>{{ props.row.code }}</span>
                </el-form-item>
                <el-form-item label="团队人数">
                    <span>{{ props.row.number }}人</span>
                </el-form-item>
                <el-form-item label="项目期限">
                    <span>{{ props.row.duration }}天</span>
                </el-form-item>
                <el-form-item label="指导教师">
                    <span>{{ props.row.teacherid }}</span>
                </el-form-item>
                <el-form-item label="预计经费">
                    <span>{{ props.row.cost }}元</span>
                </el-form-item>
                <el-form-item label="状态">
                    <span :class="props.row.state==='0'?'unormal-text':'normal-text'">{{ getProjectState(props.row.state) }}</span>
                </el-form-item>
                </el-form>
            </template>
            </el-table-column>
            <el-table-column
            label="项目名称"
            prop="projectname">
            </el-table-column>
            <el-table-column
            label="申请人姓名"
            prop="name">
            </el-table-column>
            <el-table-column
            label="联系方式(QQ)"
            prop="code">
            </el-table-column>
        </el-table>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { mapState } from 'vuex';
export default {
    name:'projectStatistics',
    data(){
        return{
            teacherList:[],
            costRankList:[]
        }
    },
    methods:{
        // 绘图方法1
        drawChart(){
            let chart=echarts.init(document.getElementById("teacherData"));
            let option = {
                title: {
                    text: '指导教师受欢迎指数',
                    subtext: 'Data',
                    left: 'center'
                },
                toolbox: {
                    show: true,
                    feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '10%',
                    left: 'center'
                },
                series: [
                    {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data:this.teacherList
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            chart.setOption(option);
        },
        // 绘图方法2
        drawChart1(){
            let chart=echarts.init(document.getElementById("costRankData"))
            let option = {
                title: {
                    text: '项目经费等级比例一览图',
                    subtext: 'Data',
                    left: 'center'
                },
                legend: {
                        top: '10%'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 100],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius:20
                        },
                        data: this.costRankList
                        }
                    ]
                };
             // 使用刚指定的配置项和数据显示图表。
             chart.setOption(option);
        },
        getProjectState(stateCode){
            let result='';
            switch(stateCode){
                case '0':
                    result='待审核';
                    break;
                case '1':
                    result='审核通过';
                    break;
                case '-1':
                    result='审核失败';
                    break;
            }
            return result;
        }
    },
    computed:{
        ...mapState('projectStatistics',['teacherPopulartionList','costRankDataList','projectListWithState'])
    },
    watch:{
        'teacherPopulartionList':{
            // immediate:true,
            handler(newV,oldV){
                this.teacherList=newV;
                this.drawChart();
            }
        },
        'costRankDataList':{
            // immediate:true,
            handler(newV,oldV){
                this.costRankList=newV
                this.drawChart1();
            }
        }
    },
    mounted(){
        this.$store.dispatch("projectStatistics/getTeacherPopulartion");
        this.$store.dispatch("projectStatistics/getProjectCostRank");
        this.$store.dispatch("projectStatistics/getProjectListWithState");

        window.onresize = () => {
            window.location.reload()
        };
    }
}
</script>

<style scoped lang="css">
    .statistics-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .teacher-data-box{
        position: inherit;
        top: 2%;
        left: 2%;
        height: 100%;
        width: 45%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        overflow: auto;
    }
    .costRank-box{
        position: inherit;
        top: 2%;
        right: 2%;
        height: 100%;
        width: 45%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        overflow: auto;
    }
    .project-box{
        position: inherit;
        top: 105%;
        left: 2%;
        height: 50%;
        width: 96%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        overflow: auto;
    }
    .normal-text{
        color: black;
    }
    .unormal-text{
        color: red;
    }
    .demo-table-expand {
    font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>